<template>
    <div class="infoPage">
        <HeadTop title='个人信息'/>
        <div class="margintop"></div>
        <div class="block">
            <ul>
                <li class="ul-item touxiang">
                    头像
                    <img :src="userData.img" alt="">
                </li>
                <li class="ul-item">
                    昵称
                    <span>{{userData.nick}}</span>
                </li>
                <li class="ul-item">
                    性别
                    <span>{{userData.sex}}</span>
                </li>
                <li class="ul-item">
                    签名
                    <span>{{userData.info}}</span>
                </li>
            </ul>
        </div>
        <div class="block">
            <ul>
                <li class="ul-item">
                    生日
                    <span>{{userData.birth}}</span>
                </li>
                <li class="ul-item">
                    所在城市
                    <span>{{userData.city}}</span>
                </li>
                
            </ul>
        </div>
    </div>
</template>

<script>
import HeadTop from '../../components/Nav/HeadTop'
export default {
    components:{
        HeadTop
    },
     data() {
        return {
            userData:{}
        }
    },
    
    methods: {
        
    },
    mounted() {
        this.api.GetUser()
        .then(res=>{
            console.log(res)
            if(res.data.success){
                this.userData=res.data.userData;
                
            }
        })
    },
}
</script>

<style lang="less" scoped>
.infoPage{
    width: 100%;
    height: 100%;
    background: #eee;
}
.block{
    margin-bottom: 0.2rem;
    background: #fff;
    
}
.margintop{
    height: 0.2rem;
    background: transparent;
}
.ul-item{
    width: 100%;
    height: 1rem;
    line-height: 1rem;
    text-align: left;
    padding-left: 0.2rem;
    font-size: 0.32rem;
    box-sizing: border-box;
    border-bottom: 1px solid #ddd;
    padding-right: 0.2rem;
    span{
        float: right;
    }
    
}
.touxiang{
    height: 1.6rem;
    line-height: 1.2rem;
    padding-top: 0.2rem;
    box-sizing: border-box;
    img{
            float: right;
            width: 1.2rem;
            
            border-radius: 50%;
        }
}
</style>